<template>
  <span class="star">
    <span v-show="!isStar">
      <ri i="star" class="grey" @click="addStar"></ri>
    </span>
    <span class="star-stats" v-show="isStar">
      <ri i="star-fill"></ri>
      <span class="star-count">
        {{star.value}}
      </span>
    </span>
  </span>
</template>

<script>
export default {
  props: ["star"],
  data() {
    return {
    };
  },
  computed: {
    isStar() {
      return this.star && this.star.value > 0;
    },
  },
  methods: {
    addStar() {
      // this.star.value = 1;
      //this.$emit("update-context", {kind: NoteKind.Star, value: 1});
      // this.$emit("save-note");
      this.onStarChanged();
    },
    onStarChanged() {
      let star = { value: this.star.value }
      if (star.value > 0) star.value = 1;
      if (star.value < 0) star.value = -1;
      return this.authPost("/api/v1/note/star", star).then(() => {});
    },
  },
};
</script>

<style lang="stylus">
.star
  margin 0 5px
  color #409EFF

  .grey
    color #ccc
    cursor pointer

    &:hover
      color #409EFF
</style>
<style lang="stylus" scoped>
.star-button
  padding 8px 10px


  &.active
    padding 8px 5px 8px 10px

  .star-count
    margin-left 5px

.star-down-button
  padding 8px 10px 8px 5px
</style>